<template>
    <div class="bbsc_wrap">
        <div class="page-content">
            <div class="panel-item">
                <el-radio-group v-model="radio1" size="medium">
                    <el-radio-button label="1">日报表</el-radio-button>
                    <el-radio-button label="2">月报表</el-radio-button>
                    <el-radio-button label="3">年报表</el-radio-button>
                </el-radio-group>

                <span class="item-label">日期选择：</span>
                <el-date-picker
                        type="dates"
                        size="small"
                        v-model="dateTime"
                        placeholder="选择日期">
                </el-date-picker>
                <el-date-picker
                        v-model="dateTime"
                        type="month"
                        size="small"
                        placeholder="选择月">
                </el-date-picker>
                <el-date-picker
                        v-model="dateTime"
                        type="year"
                        size="small"
                        placeholder="选择年">
                </el-date-picker>

                <div class="btn-group">
                    <el-button class="hy_btn"><img src="../../assets/images/bbsc/icon_reset.png" alt="">重置</el-button>
                    <el-button class="hy_btn is_primary" type="primary"><img src="../../assets/images/bbsc/icon_add.png" alt="">确定</el-button>
                </div>

                <div class="line-between"></div>

                <div class="panel-title">整体指标</div>

                <div class="details-info">
                    <div class="list-box">
                        <div class="list-item" v-for="item in dataList">
                            <span class="list-item-label">{{ item.label }}</span>
                            <span class="list-item-value">{{ item.value }}<span>{{ item.unit }}</span></span>
                        </div>
                    </div>
                    <div class="chart-box">
                        <el-progress type="circle"
                                     :percentage="88"
                                     :stroke-width="12"
                                     :width="134"
                                     color="#2050D5"
                        ></el-progress>

                        <div class="chart-label">清洁能源用量占比</div>
                    </div>
                </div>
            </div>

            <div class="panel-item">
                <div class="chart-item">
                    <div class="chart-box" ref="barChart1"></div>
                </div>
                <div class="chart-item">
                    <div class="chart-box" ref="barChart2"></div>
                </div>
                <div class="chart-item">
                    <div class="chart-box" ref="barChart3"></div>
                </div>
                <div class="chart-item">
                    <div class="chart-box" ref="barChart4"></div>
                </div>
            </div>

            <div class="panel-item">
                <div class="panel-title">系统分时运行状态</div>

                <div class="chart-box" ref="barChart5"></div>
            </div>

            <div class="panel-item">
                <div class="panel-title">告警故障信息统计</div>

                <div class="item-group">
                    <div class="item-box">
                        <div class="panel-title">光伏信息统计</div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）发电量：</span>
                            <span class="item-info-value">238,293<span> kWh</span></span>
                        </div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）预测精度：</span>
                            <span class="item-info-value">98.6<span> %</span></span>
                        </div>
                    </div>

                    <div class="item-box">
                        <div class="panel-title">制氢设备信息统计</div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）制氢量：</span>
                            <span class="item-info-value">238,293<span> Nm³</span></span>
                        </div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）耗电量：</span>
                            <span class="item-info-value">329<span> kWh</span></span>
                        </div>
                    </div>

                    <div class="item-box">
                        <div class="panel-title">燃料电池统计</div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）耗氢量：</span>
                            <span class="item-info-value">238,293<span> Nm³</span></span>
                        </div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）耗电量：</span>
                            <span class="item-info-value">329<span> kWh</span></span>
                        </div>
                    </div>

                    <div class="item-box">
                        <div class="panel-title">加氢机统计</div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）加氢量：</span>
                            <span class="item-info-value">238,293<span> Nm³</span></span>
                        </div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）加氢次数：</span>
                            <span class="item-info-value">213<span> 次</span></span>
                        </div>
                        <div class="item-info">
                            <span class="item-info-label">当日（月、年）耗电量：</span>
                            <span class="item-info-value">238,293<span> kwh</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                radio1: '1',
                dateTime: '',
                dataList: [
                    {label: '总发电量：', value: '0.00 ', unit: 'MWH'},
                    {label: '总制氢量：', value: '0.00 ', unit: 'NM³'},
                    {label: '系统碳排放降低：', value: '0.00 ', unit: 'T'},
                    {label: '总用电量：', value: '0.00 ', unit: 'MWh'},
                    {label: '总耗氢量：', value: '0.00 ', unit: 'NM³'},
                    {label: '', value: '', unit:''},
                    {label: '总购电量：', value: '0.00 ', unit: 'MWh'},
                    {label: '总加氢次数：', value: '02  ', unit: '次'},
                ]
            }
        },
        methods: {
            barChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 14,
                        }
                    },
                    grid: {
                        top: '25%',
                        right: '1%',
                        bottom: '0%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',//鼠标移动上去的样式，有line和shadow两种
                        },
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '0%',
                        icon: 'circle',
                        itemGap: 25,
                        itemWidth: 6,
                        itemHeight: 6,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                            padding: [2,0,0,0]
                        },
                    },
                    color: ['#35C759','#FF9500', '#2C50EE'],
                    xAxis: [
                        {
                            type: 'category',
                            // boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[1],
                        },
                        {
                            name: obj.legend[2],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[2],
                        },
                    ],
                };

                chart.setOption( option );
            },

            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '7%',
                        textStyle: {
                            color: '#535763',
                            fontSize: 14,
                        }
                    },
                    grid: {
                        top: '30%',
                        right: '1%',
                        bottom: '1%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',//鼠标移动上去的样式，有line和shadow两种
                        },
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '7%',
                        icon: 'circle',
                        itemGap: 25,
                        itemWidth: 6,
                        itemHeight: 6,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                            padding: [2,0,0,0]
                        },
                    },
                    color: ['#2C50EE','#35C759'],
                    xAxis: [
                        {
                            type: 'category',
                            // boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[1],
                        },
                    ],
                };

                chart.setOption( option );
            },
        },
        mounted() {
            this.barChartLoad(
                {
                    names: ['09/01','09/02','09/03','09/04','09/05','09/06','09/07',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210, ],
                        [203, 133, 250, 130, 129, 130, 110, ],
                        [103, 123, 260, 110, 169, 150, 140, ],
                    ],

                    id: 'barChart1',
                    legend: ['A', 'B', 'C', ],
                    title: '发电量（KW）',
                }
            );
            this.barChartLoad(
                {
                    names: ['09/01','09/02','09/03','09/04','09/05','09/06','09/07',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210, ],
                        [203, 133, 250, 130, 129, 130, 110, ],
                        [103, 123, 260, 110, 169, 150, 140, ],
                    ],

                    id: 'barChart2',
                    legend: ['A', 'B', 'C', ],
                    title: '用电量（KW）',
                }
            );
            this.barChartLoad(
                {
                    names: ['09/01','09/02','09/03','09/04','09/05','09/06','09/07',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210, ],
                        [203, 133, 250, 130, 129, 130, 110, ],
                        [103, 123, 260, 110, 169, 150, 140, ],
                    ],

                    id: 'barChart3',
                    legend: ['A', 'B', 'C', ],
                    title: '制氢量（m³）',
                }
            );
            this.barChartLoad(
                {
                    names: ['09/01','09/02','09/03','09/04','09/05','09/06','09/07',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210, ],
                        [203, 133, 250, 130, 129, 130, 110, ],
                        [103, 123, 260, 110, 169, 150, 140, ],
                    ],

                    id: 'barChart4',
                    legend: ['A', 'B', 'C', ],
                    title: '用氢量（m³）',
                }
            );

            this.chartLoad(
                {
                    names: ['制氢','燃料电池','储氢罐','压缩机','加氢机','变流器',],
                    value: [
                        [233, 233, 200, 180, 199, 233, ],
                        [203, 133, 250, 130, 129, 130, ]
                    ],

                    id: 'barChart5',
                    legend: ['过去7天', '上个周期', ],
                    title: '过去7天告警/上个周期对比',
                }
            );
        }
    }
</script>

<style lang="less">
    .bbsc_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.panel-item {
                width: 100%;
                background: #FFFFFF;
                border-radius: 8px;
                margin-bottom: 28px;
                box-sizing: border-box;
                position: relative;

                &:nth-of-type( 1 ) {
                    height: 376px;
                    padding: 43px 40px;
                    line-height: 36px;

                    .item-label {
                        display: inline-block;
                        vertical-align: top;
                        margin-left: 130px;
                        font-size: 16px;
                        font-weight: 600;
                        color: #535763;
                    }

                    .el-date-editor {
                        width: 120px;
                        margin-right: 20px;

                        >.el-input__inner {
                            background: #FFFFFF;
                            border-radius: 4px;
                            border: 1px solid #CFD1D8;
                            font-size: 14px;
                            color: #535763;
                            padding-left: 10px;
                        }

                        .el-input__prefix {
                             display: none;
                        }
                    }

                    >.btn-group {
                        position: absolute;
                        right: 40px;
                        top: 40px;

                        .el-button {

                            img {
                                position: relative;
                                top: -0.1px;
                            }
                        }

                        .el-button.hy_btn + .el-button.hy_btn {
                            margin-left: 16px;
                        }
                    }

                    >.line-between {
                        width: 100%;
                        height: 1px;
                        background-color: #EEEFF2;
                        margin: 33px 0 25px;
                    }

                    >.panel-title {
                        margin-bottom: 22px;
                    }

                    >.details-info {
                        width: 100%;
                        height: 162px;

                        >div {
                            display: inline-block;
                            vertical-align: top;
                            box-sizing: border-box;
                            height: 100%;

                            &.list-box {
                                width: 1094px;
                                border-right: 1px solid #EEEFF2;

                                .list-item {
                                    display: inline-block;
                                    vertical-align: top;
                                    width: calc( 100% / 3 );
                                    line-height: 46px;

                                    >.list-item-label {
                                        display: inline-block;
                                        vertical-align: middle;
                                        font-size: 16px;
                                        color: #535763;
                                        /*min-width: 108px;*/
                                        padding-right: 12px;
                                    }

                                    >.list-item-value {
                                        display: inline-block;
                                        vertical-align: top;
                                        font-size: 25px;
                                        font-weight: 600;
                                        color: #000000;

                                        >span {
                                            font-size: 15px;
                                        }
                                    }
                                }
                            }

                            &.chart-box {
                                width: calc( 100% - 1094px );
                                position: relative;
                                text-align: center;

                                >.el-progress {
                                    position: relative;
                                    top: -15px;

                                    .el-progress-circle__track {
                                        stroke: #ffffff;
                                    }

                                    .el-progress__text {
                                        width: 100px;
                                        height: 100px;
                                        line-height: 100px;
                                        background: rgba(44, 80, 238, 0.07);
                                        border-radius: 50%;
                                        font-size: 26px !important;
                                        font-weight: 600;
                                        color: #2050D5;
                                        left: 0;
                                        right: 0;
                                        margin: auto;
                                    }
                                }

                                >.chart-label {
                                    font-size: 16px;
                                    font-weight: 600;
                                    color: #535763;
                                    position: relative;
                                    top: -20px;
                                }
                            }
                        }
                    }
                }

                &:nth-of-type( 2 ) {
                    height: 632px;
                    background-color: transparent;

                    >.chart-item {
                        display: inline-block;
                        vertical-align: top;
                        width: calc( 50% - 14px );
                        height: calc( 50% - 14px );
                        margin-right: 28px;
                        margin-bottom: 28px;
                        background: #FFFFFF;
                        border-radius: 8px;

                        >.chart-box {
                            width: 100%;
                            height: 100%;
                            padding: 40px;
                            box-sizing: border-box;
                        }

                        &:nth-of-type( 2n ) {
                            margin-right: 0;
                        }

                        &:nth-of-type( 3 ) {
                            margin-bottom: 0;
                        }

                        &:nth-of-type( 4 ) {
                            margin-bottom: 0;
                        }
                    }
                }

                &:nth-of-type( 3 ) {
                    height: 344px;
                    padding: 40px 40px 30px;

                    >.chart-box {
                        width: 100%;
                        height: calc( 100% - 28px );
                    }
                }

                &:nth-of-type( 4 ) {
                    height: 450px;
                    margin-bottom: 0;
                    padding: 40px;

                    .item-group {
                        padding-top: 20px;

                        >.item-box {
                            padding: 20px 30px;
                            box-sizing: border-box;
                            display: inline-block;
                            vertical-align: top;
                            width: calc( 50% - 14px );
                            min-height: 120px;
                            margin-bottom: 28px;
                            margin-right: 28px;
                            background-size: 100% 100%;
                            line-height: 38px;

                            >.item-info {
                                display: inline-block;
                                vertical-align: top;
                                width: 50%;
                                font-size: 16px;
                                color: #535763;
                                padding-top: 10px;


                                >.item-info-value {
                                    font-size: 25px;
                                    font-weight: 600;
                                    color: #000000;

                                    >span {
                                        font-size: 15px;
                                    }
                                }

                                &:nth-of-type( 2n + 1 ) {
                                    padding-left: 30px;
                                    box-sizing: border-box;
                                }
                            }

                            &:nth-of-type( 1 ) {
                                background-image: url("../../assets/images/bbsc/bg_item_1.png");
                            }

                            &:nth-of-type( 2 ) {
                                background-image: url("../../assets/images/bbsc/bg_item_2.png");
                            }

                            &:nth-of-type( 3 ) {
                                background-image: url("../../assets/images/bbsc/bg_item_3.png");
                            }

                            &:nth-of-type( 4 ) {
                                background-image: url("../../assets/images/bbsc/bg_item_4.png");
                            }

                            &:nth-of-type( 2n ) {
                                margin-right: 0;
                            }
                        }
                    }


                }
            }
        }
    }
</style>
